<script lang="ts">
import { GameSelect } from '~/components-business/game';
</script>

<script setup lang="ts">
const props = defineProps<{
  userId: string;
}>();
function useTableList() {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiGameStatosticDetails, {
    type_alias: { value: undefined, responsive: true },
    code: { value: undefined, responsive: true },
    id: { value: props.userId, responsive: true },
  });

  const listData = computed(() => listQry.data.value ?? []);
  const tableColumns = computed(() => [
    { key: 'amount', name: $t('gvaNrH39Be8S2exuYfuAs') },
    { key: 'bount', name: $t('bUsnDrIeEyr9MDa1MFyMm') },
  ]);

  return {
    listQry,
    listParams,
    listData,
    tableColumns,
  };
}
const { listQry, listParams, listData, tableColumns } = useTableList();
</script>

<template>
  <div class="p-3">
    <div class="mb-3 w-full flex gap-3">
      <GameSelect
        v-model:gameType="listParams.type_alias" v-model:game="listParams.code" class="!flex-1"
      />
    </div>
    <TCard>
      <TSuspenseView
        v-bind="buildSvPropsOfQuery(listQry, { useFetching: true })" nonSuccessClass="min-h-40"
      >
        <TTable :data="listData" :columns="tableColumns" indexId="order_no">
          <template #amount-td="{ row }">
            {{ row?.valid_amount }}
            {{ row.currency }}
          </template>
          <template #bount-td="{ row }">
            {{ row.bet_count }}
          </template>
        </TTable>
      </TSuspenseView>
    </TCard>
  </div>
</template>
